<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本列表</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<div id="root">
    <h1>遍历数组</h1>
    <ul>
        <li v-for="(p,index) in persons" :key="index">{{p.name}}-{{p.age}}
        </li>
    </ul>
    <h1>遍历对象</h1>
    <ul>
<!--        (value,key)-->
        <li v-for="(a,b) in car">{{a}}-{{b}}
        </li>
    </ul>
    <h1>测试遍历字符串</h1>
    <ul>
        <li v-for="(char,index) in str" :key="index">{{index}}-{{char}}
        </li>
    </ul>
    <h1>测试遍历指定次数</h1>
    <ul>
        <li v-for="(number,index) in 5" :key="index">{{index}}-{{number}}
        </li>
    </ul>
</div>

</body>
<script type="text/javascript">
    Vue.config.productionTip=false
    new Vue({
        el:'#root',
        data:{
            persons:[
                {id:'001',name:'张三',age:12},
                {id:'002',name:'张的',age:14},
                {id:'003',name:'张那',age:16}
            ],
            car:{
                name:'奥迪',
                price:"80万",
                color:'黄'
            },
            str:'asdfghjkl'
        }
    })

</script>
</html>